<template>
  <div class="app-container">
    <el-alert :closable="false" title="查看电子票据明细"/>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="电子票据代码" prop="billBatchCode">
            <el-input placeholder="请输入电子票据代码" v-model="form.billBatchCode"/>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="电子票据号码" prop="billNo">
            <el-input placeholder="请输入票据号码" v-model="form.billNo"/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="onCancel">重置</el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-descriptions
      title="票据明细"
      v-show="dialog_visible"
      border
      :column="4"
      :label-width="80">
      <el-descriptions-item>
        <template slot="label">
          电子票据种类名称
        </template>
        {{formList.billName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          电子票据代码
        </template>
        {{formList.billBatchCode}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          电子票据号码
        </template>
        {{formList.billNo}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          电子校验码
        </template>
        {{formList.random}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          开票时间
        </template>
        {{formList.ivcDateTime}}
      </el-descriptions-item>
<!--      <el-descriptions-item>-->
<!--        <template slot="label">-->
<!--          状态-->
<!--        </template>-->
<!--        {{formList.state}}-->
<!--      </el-descriptions-item>-->
<!--      <el-descriptions-item>-->
<!--        <template slot="label">-->
<!--          是否打印纸质票据-->
<!--        </template>-->
<!--        {{formList.isPrtPaper}}-->
<!--      </el-descriptions-item>-->
<!--      <el-descriptions-item>-->
<!--        <template slot="label">-->
<!--          纸质票据代码-->
<!--        </template>-->
<!--        {{formList.pBillBatchCode}}-->
<!--      </el-descriptions-item>-->
<!--      <el-descriptions-item>-->
<!--        <template slot="label">-->
<!--          纸质票据号码-->
<!--        </template>-->
<!--        {{formList.pBillNo}}-->
<!--      </el-descriptions-item>-->
<!--      <el-descriptions-item>-->
<!--        <template slot="label">-->
<!--          纸质票据生成时间-->
<!--        </template>-->
<!--        {{formList.pCreateTime}}-->
<!--      </el-descriptions-item>-->
<!--      <el-descriptions-item>-->
<!--        <template slot="label">-->
<!--          纸质票据业务发生时间-->
<!--        </template>-->
<!--        {{formList.pBillBusDate}}-->
<!--      </el-descriptions-item>-->
      <el-descriptions-item>
        <template slot="label">
          是否已开红票
        </template>
        {{formList.isScarlet == '1'? '是':''}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          电子红票代码
        </template>
        {{formList.scarletBillBatchCode}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          电子红票号码
        </template>
        {{formList.scarletBillNo}}
      </el-descriptions-item>
<!--      <el-descriptions-item>-->
<!--        <template slot="label">-->
<!--          电子红票随机码-->
<!--        </template>-->
<!--        {{formList.scarletRandom}}-->
<!--      </el-descriptions-item>-->
<!--      <el-descriptions-item>-->
<!--        <template slot="label">-->
<!--          电子红票二维码图片-->
<!--        </template>-->
<!--        {{formList.scarletBillQRCode}}-->
<!--      </el-descriptions-item>-->
<!--      <el-descriptions-item>-->
<!--        <template slot="label">-->
<!--          电子红票生成时间-->
<!--        </template>-->
<!--        {{formList.scarletCreateTime}}-->
<!--      </el-descriptions-item>-->
<!--      <el-descriptions-item>-->
<!--        <template slot="label">-->
<!--          电子红票业务发生时间-->
<!--        </template>-->
<!--        {{formList.scarletBillBusDate}}-->
<!--      </el-descriptions-item>-->
    </el-descriptions >
  </div>
</template>

<script>
import {postAction} from "../../api/manage";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      form: {
        billBatchCode: '',  //电子票据代码
        billNo: ''  //	电子票据号码
      },
      formList: {
        billName: '',//电子票据种类名称
        billBatchCode: '', //电子票据代码
        billNo: '', //电子票据号码
        random: '', //电子校验码
        ivcDateTime: '', //开票时间
        state:  '', //状态
        isPrtPaper: '', //是否打印纸质票据
        pBillBatchCode: '', //纸质票据代码
        pBillNo: '',  //纸质票据号码
        pCreateTime: '', //纸质票据生成时间
        pBillBusDate: '', //纸质票据业务发生时间
        isScarlet: '', //是否已开红票
        scarletBillBatchCode: '', //电子红票代码
        scarletBillNo: '', //电子红票号码
        scarletRandom: '', //电子红票随机码
        scarletBillQRCode: '',  //电子红票二维码图片
        scarletCreateTime: '', //电子红票生成时间
        scarletBillBusDate: '' //电子红票业务发生时间
      },

      rules: {
        billBatchCode: [
          { required: true, message: '请输入票据代码', trigger: 'blur' },
          // 其他验证规则
        ],
        billNo: [
          { required: true, message: '请输入票据号码', trigger: 'blur' },
          // 其他验证规则
        ]
        // 其他表单项的验证规则
      },
      // 定义属性接收 传递过来的属性
      dialog_visible: false,
      urls: {
        getBillInfo: '/nmyx/leantech/getEBillStatesByBillInfo' //票据信息查询
      }
    }
  },
  created() {
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate(vaild =>{
        if (vaild) {
          // 表单验证通过，可以提交表单数据
          // console.log('表单验证通过');
          postAction(this.urls.getBillInfo,this.form).then(res =>{
            if (res.code === 'SUCCESS') {
              this.dialog_visible = true
              console.log('billinfo ---',res)
              if (res.data != null) {
                this.formList = res.data
              } else {
                this.formList = {}
              }
            } else {
              this.dialog_visible = false
              this.$message.error(res.message)
            }
          })
        } else {
          return false
        }
      })
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
      this.$refs['form'].resetFields()
      this.dialog_visible = false
    }
  }
}
</script>
<style scoped>
</style>

